<template>
  <div class="page-five-container">
    <!-- 用户列表 -->
    <div v-if="currentView === 'list'" class="user-list">
      <h2 class="title">用户列表</h2>

      <!-- 加载状态 -->
      <p v-if="loading" class="loading-text">加载中...</p>

      <!-- 错误信息 -->
      <p v-else-if="error" class="error-text">{{ error }}</p>

      <!-- 用户卡片 -->
      <div v-else-if="users.length > 0" class="cards">
        <div
          v-for="user in users"
          :key="user.id"
          class="card"
          @click="showDetail(user.id)"
        >
          <div class="card-header">
            <strong>{{ user.name }}</strong>
          </div>
          <div class="card-body">
            <p>📧 {{ user.email }}</p>
            <p>🏢 {{ user.company ? user.company.name : '无公司信息' }}</p>
          </div>
        </div>
      </div>

      <!-- 没有数据时提示 -->
      <p v-else class="no-data">没有用户数据。</p>
    </div>

    <!-- 用户详情 -->
    <div v-else-if="currentView === 'detail'" class="user-detail">
      <button @click="goBack" class="back-btn">← 返回</button>
      <h1>{{ selectedUser.name }} 的详情</h1>

      <div class="info-card">
        <p><strong>📧 邮箱：</strong> {{ selectedUser.email }}</p>
        <p><strong>📍 地址：</strong> {{ selectedUser.address.city }}, {{ selectedUser.address.street }}</p>
        <p><strong>📞 电话：</strong> {{ selectedUser.phone }}</p>
        <p><strong>🌐 网站：</strong> {{ selectedUser.website }}</p>
        <p><strong>🏢 公司：</strong> {{ selectedUser.company ? selectedUser.company.name : '暂无' }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentView: 'list', // 当前视图：'list' 或 'detail'
      users: [],
      loading: true,
      error: null,
      selectedUser: null
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      const apiUrl = 'https://jsonplaceholder.typicode.com/users';
      axios.get(apiUrl)
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('请求失败:', error);
          this.error = '无法加载用户数据。';
        })
        .finally(() => {
          this.loading = false;
        });
    },
    showDetail(userId) {
      const user = this.users.find(u => u.id === userId);
      if (user) {
        this.selectedUser = user;
        this.currentView = 'detail';
      }
    },
    goBack() {
      this.currentView = 'list';
    }
  }
};
</script>

<style scoped>
.page-five-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f8f9fa;
  padding: 20px;
}

.user-list, .user-detail {
  width: 100%;
  max-width: 1000px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.loading-text,
.error-text,
.no-data {
  text-align: center;
  font-size: 1.1rem;
  color: #666;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.card {
  flex: 0 0 calc(33.333% - 14px);
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 15px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  border: 1px solid #eee;
}

.card:hover {
  transform: translateY(-5px);
}

.card-header {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #444;
}

.card-body p {
  margin: 5px 0;
  color: #777;
}

.back-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 20px;
}

.info-card {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 20px;
}

.info-card p {
  margin: 10px 0;
  font-size: 1rem;
  color: #333;
}
</style>